<template>
  <div class="register-content">
    <div class="login_box">
      <div class="close" @click="close">
        <!-- <img src="image/取消.png" style="width: 30px; height: 30px" alt="" /> -->
        <Svgs ids="#icon-cuowu" style="font-size: 26px"></Svgs>
      </div>
      <div class="login_form">
        <div class="login_title">注册 <span></span></div>
        <div class="form_text_ipt">
          <el-input
            placeholder="请输入昵称"
            name="nickname"
            v-model="nickname"
            clearable
            @blur="userBlur"
          >
          </el-input>
        </div>
        <div class="ececk_warning" v-show="shownickname">
          <span>昵称不能为空</span>
        </div>
        <div class="form_text_ipt">
          <el-input
            placeholder="用户名/手机号码"
            name="userphone"
            v-model="userphone"
            clearable
            @blur="userBlur"
          >
          </el-input>
        </div>
        <div class="ececk_warning" v-show="showuserphone">
          <span>用户名/手机号码不能为空</span>
        </div>
        <div class="form_text_ipt">
          <el-input
            placeholder="请输入密码"
            v-model="password"
            show-password
            name="password"
            @blur="userBlur"
          ></el-input>
        </div>
        <div class="ececk_warning" v-show="showpassword">
          <span>密码不能为空</span>
        </div>
        <div class="form_text_ipt">
          <el-input
            placeholder="确认密码"
            v-model="chickpassword"
            show-password
            name="chickpassword"
            @blur="userBlur"
          ></el-input>
        </div>
        <div class="ececk_warning" v-show="showchickpassword">
          <span>密码不能为空</span>
        </div>
        <div class="form_text_ipt">
          <el-input
            placeholder="请输入邮箱"
            v-model="email"
            clearable
            name="email"
            @blur="userBlur"
          ></el-input>
        </div>
        <div class="ececk_warning" v-show="showemail">
          <span>邮箱不能为空</span>
        </div>
        <div class="form_text_ipt">
          <div class="block">
            <el-cascader
              :options="options"
              v-model="address"
              :show-all-levels="false"
              name="address"
            ></el-cascader>
          </div>
        </div>
        <div class="ececk_warning" v-show="showaddress">
          <span>地址不能为空</span>
        </div>

        <div class="form_btn">
          <button type="button" id="button1" v-on:click="submit">注册</button>
        </div>
        <div class="form_reg_btn" id="tologin">
          <span>已有帐号？</span
          ><router-link to="/tologin" replace>马上登录</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Svgs from "@/components/svg/svg.vue";
import pubsub from "pubsub-js";
import md5 from "js-md5";
import axios from "axios";

export default {
  name: "Register",
  components: {
    Svgs,
  },
  data() {
    return {
      input: "",
      options: [], //地区级联信息
      nickname: "", //用户昵称
      userphone: "", //用户账号
      password: "", //密码
      chickpassword: "", //检查密码
      email: "", //邮箱
      address: "", //地址
      shownickname: false,
      showuserphone: false,
      showpassword: false,
      showchickpassword: false,
      showemail: false,
      showaddress: false,
       md5salt: "1a2b3c4c", //加密的盐
    };
  },
  mounted() {
    // 为给定 ID 的 user 创建请求
    const that = this;
    axios.get("/aabbcc/test/address").then(function (response) {
      that.options = response.data;
    });
  },
  methods: {
    close() {
      //发布信息
      pubsub.publish("leave", false);
    },
    userBlur(e) {
      //用户账号或密码失去焦点触发
      if (
        e.target.value == null ||
        typeof e.target.value == "undefined" ||
        e.target.value == ""
      ) {
        if (e.target.name == "nickname") {
          this.shownickname = true;
        } else if (e.target.name == "userphone") {
          this.showuserphone = true;
        } else if (e.target.name == "password") {
          this.showpassword = true;
        } else if (e.target.name == "chickpassword") {
          this.showchickpassword = true;
        } else if (e.target.name == "email") {
          this.showemail = true;
        }
        // this.showname = true;
      } else {
        if (e.target.name == "nickname") {
          this.shownickname = false;
        } else if (e.target.name == "userphone") {
          this.showuserphone = false;
        } else if (e.target.name == "password") {
          this.showpassword = false;
        } else if (e.target.name == "chickpassword") {
          this.showchickpassword = false;
        } else if (e.target.name == "email") {
          this.showemail = false;
        }
      }
      // 为给定 ID 的 user 创建请求
      // if(this.address=="" || this.address == null || typeof this.address == 'undefined'){
      //     alert(45455)

      // }
    },
    submit() {
      //注册提交方法
      if (
        this.nickname != "" ||
        this.userphone != "" ||
        this.password != "" ||
        this.chickpassword != "" ||
        this.email != "" ||
        this.address != ""
      ) {
        let nickname = /^[a-z0-9_-]{3,15}$/;
        //用户名不能为中文字符和特殊符号
        var reg = /^(\d+[a-zA-Z]+|[a-zA-Z]+\d+)([0-9a-zA-Z]*)$/;
        //验证手机号码
        var phoneRegex =
          /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
          //验证邮箱
            var emailReg = /^[1-9][0-9]{4,10}@qq.com$/;
        if (!nickname.test(this.nickname)) {
          this.open4("不能包含特殊字符/长度不符合");
        }else if(!nickname.test(this.userphone) || !phoneRegex.test(this.userphone)){
          this.open4("用户名不能为中文字符和特殊符号/手机号格式不正确");
        }else if(this.password != this.chickpassword){
           this.open4("请确认两次密码正确");
        }else if(!emailReg.test(this.email)){
          this.open4("请输入正确的邮箱格式");
        }else{
             //判断通过,发送axios请求
        let str =
          "" +
          this.md5salt.charAt(0) +
          this.md5salt.charAt(2) +
          this.password +
          this.md5salt.charAt(5) +
          this.md5salt.charAt(4);
          //加密密码
        let pass = md5(str);
        const that = this;
        console.log(typeof this.address)
        axios({
          method: "post",
          url: "/aabbcc/user/toRegister",
          data: {
            nickname:that.nickname,
            username: that.userphone,
            repassword: pass,
            email:that.email,
            address:that.address
          },
          
        })
          .then(function (response) {
            console.log(response);
            if (response.data.code == 500) {
              that.open4(response.data.massage);
            }
            if (response.data.code == 200) {
              that.open2(response.data.massage);
              setTimeout(() => {
                    that.$router.push({path:'tologin'})
              }, 2000); 
            
            }
          })
          .catch(function () {
            // that.open4("抱歉，登录异常");
          });
        }

      } else {
        this.open4("请输入完整信息");
      }
    },
    open4(message) {
      //错误提示框
      this.$message({
        showClose: true,
        message: message,
        type: "error",
      });
    },
    open2(message) {
      //成功提示框
      this.$message({
        showClose: true,
        message: message,
        type: "success",
      });
    },
  },
};
</script>

<style scoped>
.register-content {
  width: 100%;
  height: 100%;
  position: relative;
}
.login_box {
  width: 100%;
  /* height: 500px; */
  background: #ffffff;
  /* margin: 0px auto; */
  /* position: absolute; */
  border-radius: 0 20px 20px 0;
  top: 0;
}
.close {
  width: 30x;
  height: 30px;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
.close img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 0;
}
.login_title {
  font-size: 25px;
  text-align: center;
  color: #ff7f50;
  padding: 15px 0;
  width: 300px;
  margin: 0 auto;
  border-bottom: solid 1px #cccccc;
  position: relative;
}
.login_title span {
  width: 100%;
  height: 2px;
  background: #ff7f50;
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: scaleX(0);
  transition: all 0.5s linear;
  opacity: 0;
}
.login_title:hover span {
  transform: scaleX(1);
  transition: all 0.5s linear;
  opacity: 1;
}
.form_text_ipt {
  width: 300px;
  height: 40px;
  margin: 20px auto 0 auto;
  background: #ffffff;
}
.ececk_warning {
  font-size: 13px;
  color: red;
  width: 300px;
  margin: 0 auto;
}
.form_btn {
  width: 300px;
  height: 40px;
  margin: 10px auto;
}
.form_btn button {
  width: 100%;
  height: 100%;
  border: none;
  color: #ffffff;
  font-size: 14px;
  background: #ff7f50;
  cursor: pointer;
  border-radius: 5px;
}
.form_reg_btn {
  width: 300px;
  margin: 0 auto;
  font-size: 14px;
  color: #666;
  padding-bottom: 20px;
}
a {
  text-decoration: none;
  color: #3cf;
  -webkit-tap-highlight-color: transparent;
}
.other_login {
  overflow: hidden;
  width: 300px;
  height: 80px;
  line-height: 80px;
  margin: 0px auto;
}
.left {
  float: left;
}
.other_left {
  font-size: 14px;
  color: #999;
}
.other_right a {
  margin: 5px;
  color: #636363;
}
</style>